<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card manage">
      <!-- 头部 -->
      <div slot="header" class="clearfix manage_header">
        <!-- 返回 -->
        <div class="back" @click="backClick">
          <i></i>
          <span>返回</span>
        </div>
        <h1>新增文章</h1>
      </div>
      <!-- 表单 -->
      <el-form class="add_ariicle_select" :label-position="labelPosition" size="18px" label-width="100px" :model="erjizilei">
        <!-- 新增子类 -->
        <div class="present addSoftSele">分类选择</div>
        <el-form-item label="二级名称:">
          <el-input v-model="erjizilei.name"></el-input>
        </el-form-item>
        <div class="articleSelect">
            <label style="margin-left=-10px">问题类型:</label>
        <el-select v-model="valuea" clearable placeholder="全部">
          <el-option
            :label="item.label"
            v-for="item in options"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
        </div>
        <div class="present addSoftSele">软件参数</div>
        <el-form-item label="资讯标题:">
          <el-input class="zixuninp" v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="编辑:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="发布时间:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="浏览次数:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <div class="present addSoftSele">文章内容</div>
        <el-form-item label="发布内容:">
          <div class="addSoftEditor">
            <quill-editor
              ref="myTextEditor"
              v-model="content"
              :options="editorOption"
              style="height:400px;"
            ></quill-editor>
          </div>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <el-button class="save">保存</el-button>
    </el-card>
  </div>
</template>

<script>
// 富文本插件
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
  data() {
    return {
      // 富文本
      content: "",
      valuea: "全部",
      options: [
        { value: "选项1", label: "最近3天" },
        { value: "选项2", label: "最近5天" },
        { value: "选项3", label: "最近10天" },
        { value: "选项4", label: "最近15天" },
        { value: "选项5", label: "最近25天" }
      ],

      editorOption: {
        placeholder: "编辑文章内容"
      },
      system: "1",
      labelPosition: "right",
      text: "应用",
      erjizilei: {
        name: "",
        region: "",
        type: ""
      },
      // 上传图片的长度
      photoLength: 0
    };
  },
  // 引入富文本
  components: {
    quillEditor
  },
  methods: {
    backClick() {
      this.$router.go(-1);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 富文本发生改变
    onEditorChange({ editor, html, text }) {
      this.content = html;
    },
    // 点击二级下拉
    erjiClick() {
      console.log(11);
    },
    // 上传成功之后
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList.length);
      this.photoLength = fileList.length;
    },
    // 上传失败
    handleErr(err, file, fileList) {
      console.log(err);
    }
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.manage_header {
  margin: 10px 0 9px 30px;
  position: relative;
}
.manage_header i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_header span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.manage .el-card__header {
  padding: 0;
}
/* .present {
  margin-left: 66px;
} */
.el-input {
  width: 160px;
  height: 36px;
}
.el-form {
  margin: 20px 60px 62px;
}
label {
  font-size: 18px !important;
}
.el-form-item__label {
  padding: 0;
}
.upload_btn {
  background-color: #fff;
  width: 160px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.upload_btn i {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  background: url(../assets/img/photo.png) no-repeat;
  background-size: 28px 20px;
  margin: 0;
}
.upload_btn span {
  font-size: 16px;
  color: #757575;
  /* line-height: 47px; */
}
.upload_none {
  display: inline;
  margin-left: 10px;
}
.upload-demo {
  float: left;
}
.save {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  font-size: 24px;
  margin-left: 60px;
  color: #ffffff;
}
.manage h1 {
  padding: 0;
}
#app {
  text-align: center;
}
.erji {
  position: relative;
  width: 160px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.erji i {
  position: absolute;
  top: 10px;
  right: 15px;
}
.addSoftEditor {
  width: 802px;
  height: 513px;
}
.addSoftSele {
  margin-bottom: 26px;
}
.add_ariicle_select .el-select {
    width: 160px;
height: 36px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 5px;
}
.articleSelect {
    margin-left: 20px;
    margin-bottom: 34px;
}
.zixuninp {
    width: 468px;
height: 36px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 5px;
}
</style>
